<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin-bottom: 800px;
        }
    </style>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
        修饰符：
            - .prop - 被用于绑定 DOM 属性 (property)。
                + 实现 事件代理|事件委托 功能
            - .camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
                + 为svg标签的特殊驼峰属性进行数据格式转换
                + 为标签DOM属性进行数据格式转化
        -->
        <p :itany="arg" @click="printDom($event.target)">绑定itany属性-不定义修饰符 .prop</p>
        <p :itany.prop="arg" @click="printDom($event.target)">绑定itany属性-定义修饰符 .prop</p>
        <!-- HTML标签定义的数据是忽略大小写的 -->
        <p :user-name.prop.camel="arg" @click="printDomProp($event.target)">:user-name.prop.camel="arg"</p>
        <p :userName.prop="arg" @click="printDomProp($event.target)">:userName.prop.camel="arg"</p>

        <svg xmlns="http://www.w3.org/2000/svg" style="border: 1px solid black;"
            width="300" 
            height="300" 
            :view-box.camel=" str "
        >
            <rect width="1" height="1" x="1" y="1" fill="#d2232c" />
        </svg>
        <hr>
        <!-- 
        - 动态事件绑定(2.6+)
        - 语法：
            <标签 v-bind:[仓库变量]="取值" ></标签>
            <标签 :[仓库变量]="取值" ></标签>
         -->
        <p :[pname]="arg">动态属性绑定</p>
        <input type="button" value="itany-test 切换" @click=" pname = pname=='itany'?'test':'itany' ">
    </div>
</body>
<script>
    // HTML 标签属性  -  在正标签上之间以字符串格式定义的属性
    //                   HTML 属性和 DOM 属性存在一定映射关系
    // HTML DOM属性   -  标签转换为 DOM 对象，DOM对象所具有的属性 
    new Vue({
        el:"#app",
        data:{
            arg:"测试绑定效果",
            str:"0 0 3 3",
            pname:"itany"
        },
        methods:{
            printDom(dom){
                console.log( Object.getPrototypeOf(dom) );
                console.log("html的自定义标签属性值的获取",dom.getAttribute("itany"));
                console.log("DOM的自定义属性值的获取",dom.itany);
            },
            printDomProp(dom){
                console.log("userName:",dom.userName);
                console.log("username:",dom.username);

            }
        }
    })
</script>
</html>